<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Test : Border : Color : multi-side</title>
        <style type="text/css">
            p.p1 {
                border-width: 10px;
                border-style: solid;
                border-color: #ff0000;
                border-bottom-color: #00ff00;
                border-left-color: #00ff00;
                }
                /*
            p.p2 {
                border: 1px solid black;
                border-bottom-color: #ff0000;
                }
                */
            p.p3 {
                border-width: 10px;
                border-style: outset;
                border-color: #ff0000;
                border-bottom-color: #00ff00;
                border-left-color: #00ff00;
                }
            p.p4 {
                border-width: 10px;
                border-style: inset;
                border-color: #ff0000;
                border-bottom-color: #00ff00;
                border-left-color: #00ff00;
                }
            p.p5 {
                border-width: 10px;
                border-style: ridge;
                border-color: #ff0000;
                border-bottom-color: #00ff00;
                border-left-color: #00ff00;
                }
            p.p6 {
                border-width: 10px;
                border-style: groove;
                border-color: #ff0000;
                border-bottom-color: #00ff00;
                border-left-color: #00ff00;
                }
            p.p7 {
                border-width: 10px;
                border-style: double;
                border-color: #ff0000;
                border-bottom-color: #00ff00;
                border-left-color: #00ff00;
                }
            p.p8 {
                border-width: 1px;
                border-style: dashed;
                border-color: #ff0000;
                border-bottom-color: #00ff00;
                border-left-color: #00ff00;
                }
            p.p9 {
                border-width: 1px;
                border-style: dotted;
                border-color: #ff0000;
                border-bottom-color: #00ff00;
                border-left-color: #00ff00;
                }
        </style>
    </head>
    
    <body>
        <p class="p1">This is a paragraph with a solid 10px red border
        except for the bottom and left is green.
        </p>
        <!--
        <p></p>
        <p class="p2">This is a paragraph with a solid 1px black border
        except for the bottom is red.
        </p>
        -->
        <p></p>
        <p class="p3">This is a paragraph with an outset 10px red border
        except for the bottom and left is green.
        </p>
        <p></p>
        <p class="p4">This is a paragraph with an inset 10px red border
        except for the bottom and left is green.
        </p>
        <p></p>
        <p class="p5">This is a paragraph with an ridge 10px red border
        except for the bottom and left is green.
        </p>
        <p></p>
        <p class="p6">This is a paragraph with an groove 10px red border
        except for the bottom and left is green.
        </p>
        <p></p>
        <p class="p7">This is a paragraph with an double 10px red border
        except for the bottom and left is green.
        </p>
        <p></p>
        <p class="p8">This is a paragraph with an dashed 10px red border
        except for the bottom and left is green.
        </p>
        <p></p>
        <p class="p9">This is a paragraph with an dotted 10px red border
        except for the bottom and left is green.
        </p>
            
    </body>

</html>
